<template>
<div class="cert cert-enterp">
    <div :class="['cert-tip', statusClass]">
        {{ statusText }}
    </div>
    <p class="tip">
        仅供鱼虾港认证使用，鱼虾港不会未经授权透露您的信息给第三方机构
    </p>
    <div class="crert-pic-up">
        <div class="crert-pic-row">
            <div class="crert-pic-col upl">
                <upload-img v-if="show_upload" :url="form.idcard_pic" label="上传营业执照(正面)" @getPath="setIdcardPic"></upload-img>
                <div v-if="!show_upload" class="upload-container">
                    <img :src="form.idcard_pic" alt="">
                </div>
            </div>
            <!-- <div class="crert-pic-col exam">
                <div class="crert-pic-exam">
                    <span class="text" >点击查看示例</span>
                </div>
            </div> -->
        </div>

        <div class="crert-pic-row">
            <div class="crert-pic-col upl">
                <upload-img v-if="show_upload" :url="form.biz_lic_pic" label="上传身份证照(正面)" @getPath="setBizLicPic"></upload-img>
                <div v-if="!show_upload" class="upload-container">
                    <img :src="form.biz_lic_pic" alt="">
                </div>
            </div>
            <!-- <div class="crert-pic-col exam">
                <div class="crert-pic-exam">
                    <span class="text" >点击查看示例</span>
                </div>
            </div> -->
        </div>

    </div>
    <div v-if="[-1, 0].indexOf(check) !== -1" class="cert-action">
        <a href="javascript:;" @click="handleSubmit" class="weui-btn weui-btn_primary">提交</a>
    </div>
</div>
</template>

<script>
import uploadImg from './upload-img.vue'

export default {
    components: { uploadImg },
    data() {
        return {
            form: {
                idcard_pic: null,
                biz_lic_pic: null
            },
            check: null,
            submit: false,
            show_upload: false
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        setIdcardPic(val) {
            this.form.idcard_pic = val
        },
        setBizLicPic(val) {
            this.form.biz_lic_pic = val
        },
        handleSubmit() {
            if(!this.form.idcard_pic) {
                weui.toast('请上传营业执照');
                return false;
            }

            if(!this.form.biz_lic_pic) {
                weui.toast('请上传身份证');
                return false;
            }

            if (this.submit) {
                return false
            }
            this.submit = true
            var loading = weui.loading('提交中...');
            axios.post('/member/enterpriseCert', this.form).then(res => {
                this.submit = false
                res = res.data
                loading.hide();
                if (res.status === 'success') {
                    weui.toast(res.message, 1000);
                    window.location.href = '/member/certification';
                }else {
                    weui.alert(res.message);
                }
            }).catch(err => {
                    weui.alert(res.message);
            })
        },
        getUserInfo() {
            axios.get('/member/userInfo').then(res => {
                const data = res.data.data
                this.form.idcard_pic = data.idcard_pic
                this.form.biz_lic_pic = data.biz_lic_pic
                this.check = data.ent_check
                if([-1, 0].indexOf(this.check) !== -1) this.show_upload = true
            }).catch(err => {
                console.log(err)
            })
        }
    },
    computed: {
        statusText() {
            switch (this.check) {
                case -1:
                    return '验证未通过'
                    break;
                
                case 0:
                    return '未验证'

                case 1:
                    return '正在审核'

                case 2:
                    return '已通过验证'

                default:
                    break;
            }

        },
        statusClass() {
            switch (this.check) {
                case -1:
                    return 'danger'
                    break;
                
                case 0:
                    return 'warning'

                case 1:
                    return 'warning'

                case 2:
                    return 'success'

                default:
                    break;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.tip {
    font-size: .32rem;
    line-height: 1;
    padding: .4rem;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999;
}
.crert-pic-up {
    padding: .4rem;
}
.crert-pic-row,
.crert-pic-col {
    display: flex;
    .upl {
        flex: 1;
    }
    .exam {
        align-items: center;
    }
}
.crert-pic-row {
    margin-bottom: .533333rem;
}
.crert-pic-col {
    justify-content: center;
}
.crert-pic-exam {
    width: 2.4rem;
    height: 2.266667rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    position: relative;
    .text {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
        display: inline-block;
        font-size: .32rem;
        line-height: 0.746667rem;
        text-align: center;
        height: .746667rem;
    }
}

.cert-tip {
    text-align: center;
    font-size: .42rem;
    color: #fff;
    padding: 0.1rem;
    &.success {
        background-color: #04a25c;
    }
    &.warning {
        background-color: #ffc107;
    }
    &.danger {
        background-color: #ff5722;
    }
}

.upload-container {
    display: flex;
    width: 8rem;
    height: 4rem;
    border: 1px dashed #CCCCCC;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: .373333rem;
    color: #999;
    .upload-before {
        text-align: center;
    }
    .icon {
        display: inline-block;
        font-size: 1rem;
        color: #999;
        margin-bottom: .18rem;
    }
    img {
        width: 100%;
        height: 100%;
    }
}
</style>

